<template>
  <div style="width: 100%; height: 100%">
    <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
      <Row style="text-align: left">
        <Col :span="4">
          <span>数据库名：{{ databaseName }}</span>
        </Col>
        <Col :span="8">
          <span>表名：</span>
          <Select
            v-model:value="tableName"
            style="width: 150px"
            placeholder="选择表"
            :options="tableNamesOption"
            @change="handleChange"
          ></Select>
        </Col>
        <Col :span="8">
          <span>前后端代码：</span>
          <Select
            v-model:value="frontBackVal"
            style="width: 150px"
            placeholder="选择代码类型"
            :options="frontBackOption"
          ></Select>
        </Col>
        <Col :span="4">
          <Button
            type="primary"
            @click="autoCode"
            :disabled="tableName.length == 0"
            >代码生成</Button
          >
        </Col>
      </Row>
      <Table
        :columns="columns"
        :dataSource="tableData"
        bordered
        :pagination="false"
        :scroll="{ x: '100%', y: 600 }"
        style="margin-top: 10px"
      ></Table>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  Row,
  Col,
  Table,
  Button,
  Select,
  Layout,
  Menu,
  MenuItem,
} from "ant-design-vue";
import { saveAs } from "@renderer/utils/fileSaver.js";
import { getBackCodeStr } from "@renderer/utils/getFileBackCodeStr.js";
import { getFrontCodeStr } from "@renderer/utils/getFileFrontCodeStr.js";
import { ref, watch, onMounted } from "vue";
import { defHttp } from "@renderer/utils/axios";
const { Header, Content, Footer } = Layout;
const frontBackOption = ref([
  { label: "前端", value: "front-end" },
  { label: "后端", value: "back-end" },
]);
const frontBackVal = ref("back-end");
const databaseName = ref("");
const tableNamesOption = ref([]);
const tableName = ref("");
const columns = ref([
  { title: "字段名", dataIndex: "Field", key: "Field" },
  { title: "数据类型", dataIndex: "Type", key: "Type" },
  { title: "默认值", dataIndex: "Default", key: "Default" },
  { title: "主键", dataIndex: "Key", key: "Key" },
  { title: "注释", dataIndex: "Extra", key: "Extra" },
]);
const tableData = ref([]);
const handleChange = (val) => {
  debugger;
  tableName.value = val;
  defHttp.post("/getTableColumns", { tableName: val }, {}).then((res) => {
    tableData.value = res.data;
  });
};
// 主键
const getPriKey = () => {
  let res = "";
  tableData.value.map((item) => {
    if (item.Key == "PRI") {
      res = item.Field;
    }
  });
  return res;
};
const getAllColumnsKey = () => {
  return tableData.value.map((item) => {
    return item.Field;
  });
};
//生成 前端代码
const frontEndCode = () => {
  const textContent = getFrontCodeStr(
    tableName.value,
    getPriKey(),
    getAllColumnsKey()
  );
  const blob = new Blob([textContent], { type: "text/plain;charset=utf-8" });
  saveAs(blob, tableName.value + ".vue");
};

//生成后端代码
const backEndCode = () => {
  const textContent = getBackCodeStr(
    tableName.value,
    getPriKey(),
    getAllColumnsKey()
  );
  const blob = new Blob([textContent], { type: "text/plain;charset=utf-8" });
  saveAs(blob, tableName.value + ".js");
  const text =
    "将文件位置放置在 server/controllerImplement/ 目录下 +\n" +
    "在/util.router.js中添加如下引入和配置：(注意是添加不是替换)\n" +
    "import * as " +
    tableName.value.toLowerCase() +
    "Util from '../controllerImplement/" +
    tableName.value.toLowerCase() +
    ".js'     \n" +
    "const routerOptions = [{url:'/" +
    tableName.value.toLowerCase() +
    "/',implement:" +
    tableName.value.toLowerCase() +
    "Util}]";
  const blob2 = new Blob([text], { type: "text/plain;charset=utf-8" });
  saveAs(blob2, "使用说明.txt");
};
// 代码生成
const autoCode = () => {
  debugger;
  if (frontBackVal.value == "front-end") {
    frontEndCode();
  } else {
    backEndCode();
  }
};
onMounted(() => {
  defHttp.get("/getTables", {}, {}).then((res) => {
    const data = res.data;
    let tmpArray = [];
    if (Array.isArray(data) && data.length > 0) {
      data.map((item) => {
        for (const key in item) {
          databaseName.value = key.split("_")[2];
          tmpArray.push({ label: item[key], value: item[key] });
        }
      });
    }
    tableNamesOption.value = tmpArray;
  });
});
</script>
<style scoped></style>
